<template>
  <view class="face-register-container">
    <view v-if="!photoPath">
      <text class="tip-text">请拍照录入人脸</text>
      <camera
        v-if="showCamera"
        device-position="front"
        flash="off"
        class="camera"
        @error="handleError"
        ref="camera"
      ></camera>
      <button class="confirm-btn" type="primary" @tap="takePhoto">确认拍照</button>
    </view>
    <view v-else>
      <image :src="photoPath" class="preview-img" mode="aspectFit" />
      <view class="btn-group">
        <button class="retry-btn" @tap="retryPhoto">重拍</button>
        <button class="submit-btn" type="primary" @tap="submitPhoto">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoPath: '',
      showCamera: true,
      uploading: false
    };
  },
  methods: {
    handleError(e) {
      uni.showToast({ title: '相机启动失败', icon: 'none' });
    },
    takePhoto() {
      if (!this.showCamera) return;
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.photoPath = res.tempImagePath;
          this.showCamera = false;
        },
        fail: () => {
          uni.showToast({ title: '拍照失败，请重试', icon: 'none' });
        }
      });
    },
    retryPhoto() {
      this.photoPath = '';
      this.showCamera = true;
    },
    submitPhoto() {
      if (!this.photoPath || this.uploading) return;
      this.uploading = true;
      uni.showLoading({ title: '上传中...' });
      uni.uploadFile({
        url: 'http://localhost:9050/opencv/register/face', // 替换为你的后端接口
        filePath: this.photoPath,
        name: 'image',
        formData: {},
        header: {
          "token": uni.getStorageSync('token')
        },
        success: (res) => {
          uni.hideLoading();
          this.uploading = false;
          let result = {};
          try {
            result = JSON.parse(res.data);
          } catch (e) {}
          if (result.success || result.code === 200) {
            uni.showToast({ title: '录入成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({ title: result.message || '上传失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.hideLoading();
          this.uploading = false;
          uni.showToast({ title: '网络错误，请重试', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style>
.face-register-container {
  padding: 40rpx;
  text-align: center;
}
.tip-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
}
.camera {
  width: 90vw;
  height: 600rpx;
  margin: 0 auto 40rpx auto;
  display: block;
  border-radius: 20rpx;
  background: #000;
}
.confirm-btn {
  width: 80vw;
  margin: 0 auto;
  margin-top: 40rpx;
}
.preview-img {
  width: 90vw;
  height: 600rpx;
  margin: 0 auto 40rpx auto;
  display: block;
  border-radius: 20rpx;
  background: #000;
}
.btn-group {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}
.retry-btn, .submit-btn {
  width: 200rpx;
}
</style> 